<!-- 
  文件库
 -->
<div class="file-lib-wrap">
  <div class="file-lib-head" style="clear: both;">
    <span class="bread-crumb">

      <span *ngIf='status.type==1'>
        <a [routerLink]="['/outer/dashboard']" class="breadcrumb">
          工作台
        </a>
        <b>
          <i nz-icon type="right" theme="outline"></i>
          企业资料库
        </b>
      </span>

      <span *ngIf='status.type!=1'>
        <a [routerLink]="['/outer/project-type']" class="breadcrumb">
          项目
        </a>
        <i nz-icon type="right" theme="outline"></i>
        <a (click)="routeToSurvey()" class="breadcrumb">
          {{status.name}}
        </a>
        <b>
          <i nz-icon type="right" theme="outline"></i>
          项目资料库
        </b>
      </span>


    </span>
    <span class="common-search-box" style="float: right;width: 338px;">
      <nz-input-group nzSearch [nzSuffix]="suffixButton">
        <input maxlength="50" type="text" nz-input placeholder="请输入关键字" (keyup)="keyupEvent($event)"
          [(ngModel)]="status.pager.filter" />
      </nz-input-group>
      <ng-template #suffixButton>
        <button nz-button nzType="primary" nzSearch (click)="searchEvent()">搜索</button>
      </ng-template>
    </span>

  </div>

  <div class="file-lib-container">
    <div class="lib-treemenu-wrap">
      <div class="tree-menu-hd">
        <label (click)="loadFloder()">{{status.type==1?'企业资料库':'项目资料库'}}</label>
        <!-- <button nz-button [nzType]="'primary'" [nzSize]="'small'" (click)="addCatalog()"
          style="float: right;margin-top: 16px;margin-right: 10px;">
          添加目录
        </button> -->
        <a href="javascript:;" class="add-button"
          *ngIf=" status.PIpageAuthorty.PINewFolder && status.type == 2 || status.pageAuthorty.Organizations_DocumentLibrarysNewFolder && status.type == '1'"
          (click)="editCatalog(4)">
          <i nz-icon type="plus"></i>
        </a>

      </div>

      <div class="tree-menu-bd">

        <!-- <a style="padding-left:20px;" href="javascript:;" class="menu-item-database" (click)="showAllFiles()">全部文件</a> -->
        <!-- 2019年4月20日11:36:33 取消树形 -->
        <div class="tree-edit-wrap">
          <!-- <nz-spin [nzTip]='status.loadingStatus.loadingTip' [nzSpinning]="status.loadingStatus.isLoading"
            style="min-height: 100px;">
            <nz-tree #treeCom nzShowIcon="true" [nzData]="status.roottreeNodes" (nzClick)="activeNode($event)"
              (onEditSave)="onEditSave($event)" (onDeleteSave)="onDeleteSave($event)">
              <ng-template #nzTreeTemplate let-node>
                <div class="custom-node" [id]="node.key" [class.active]="status.activedNode?.key===node.key"
                  [draggable]="isDraggable">
                  <span class="folder-name" [ngClass]="nodeItemOverflow" [title]="node.title">
                    {{node.title}}
                  </span>
                  <span class="folder-tools">
                    <i nz-icon type="form" title="编辑" (click)="editCatalog(1,node)"></i>
                    <i nz-icon type="delete" title="删除" (click)="deleteCatalog(node)"></i>
                  </span>
                </div>
              </ng-template>
            </nz-tree>
          </nz-spin> -->

          <!-- 左边目录树 -->
          <!-- <ul nz-menu [nzMode]="'inline'" *ngFor="let item of status.Menu; let idx = index;">
            <li class="custom-node" nz-menu-item style="padding-left:10px" (click)='clickMenuItem(item)'
              [nzSelected]="item.selected" [class.active]="item.selected">
              <i nz-icon type="folder" theme="fill"
                style="color: rgb(255, 214, 89);font-size: 22px; position:absolute;left:5px;margin-top:7px;margin-right:8px;"></i>
              <div [class.active]="item.selected" style="margin-left:6px;">
                <span class="hidden" title>{{item.name}}</span>
                <span class="folder-tools">
                  <i nz-icon type="form" title="编辑" (click)="editCatalog(1,item)"></i>
                  <i nz-icon type="delete" title="删除" (click)="deleteCatalog(item)"></i>
                </span>
              </div>
            </li>
          </ul> -->
          <!-- gai -->
          <nz-tree [nzData]="this.status.Menu" nzShowIcon="true" nzDraggable="true" (nzOnDragStart)="nzEvent($event)"
            (nzOnDragEnter)="nzEvent($event)" (nzOnDragLeave)="nzEvent($event)" (nzOnDrop)="nzEvent($event)"
            (nzOnDragEnd)="nzEvent($event)" (nzClick)="clickMenuItem($event)">
          </nz-tree>

        </div>

      </div>
    </div>
    <div class="lib-list-wrap">

      <div class="lib-list-hd">
        <button nz-button class="btn-upload-left" [nzType]="'primary'"
          *ngIf=" status.PIpageAuthorty.PINewFolder && status.type == 2 || status.pageAuthorty.Organizations_DocumentLibrarysNewFolder && status.type =='1'"
          (click)="editCatalog(3)">
          新建文件夹
        </button>
        <button nz-button class="btn-upload-left" [nzType]="'primary'"
          *ngIf=" status.PIpageAuthorty.PIUp && status.type == 2 || status.pageAuthorty.Organizations_DocumentLibrarysUp && status.type == '1'"
          (click)="uploadFile()">
          上传文件
        </button>

        <span class="btn-group">
          <!-- 2019年4月23日16:32:49隐藏    待开发 -->
          <!-- <a href="javascript:;" class="hd-btn-item" (click)="batchDownload()">
            <i nz-icon type="download"></i>批量下载
          </a> -->

          <a href="javascript:;" class="hd-btn-item"
            *ngIf=" status.PIpageAuthorty.PIMove && status.type == 2 || status.pageAuthorty.Organizations_DocumentLibrarysMove && status.type == '1'"
            (click)="movefile()">
            <i nz-icon type="folder"></i>移动文件
          </a>
          <a href="javascript:;" class="hd-btn-item"
            *ngIf=" (status.PIpageAuthorty.PIDelete && status.type == 2) || (status.pageAuthorty.Organizations_DocumentLibrarysDelete && status.type == '1')"
            (click)="batchDelete()">
            <i nz-icon type="delete"></i>批量删除
          </a>
          <a href="javascript:;" class="hd-btn-item" (click)="makeQRCode()">
            <i nz-icon type="qrcode"></i>生成二维码
          </a>
        </span>
      </div>
      <div class="lib-list-cont">


        <div class="table-cont">
          <!-- 2019年4月20日12:33:47 新增面包屑表示所在层级 -->
          <div class="table-bread">
            <span>
              <a href="javascript:;" class="menu-item-database" (click)="showAllFiles()">全部文件</a>
              <nz-divider nzType="vertical"></nz-divider>
              <a style="display:inline-block" (click)="goback()">返回上一级</a>
              <nz-divider nzType="vertical"></nz-divider>
              <nz-breadcrumb nzSeparator=">" style="display:inline-block"
                *ngFor="let item of status.breadcrumbList;let idx = index">
                <nz-breadcrumb-item>
                  <span *ngIf="idx != 0" style="margin: 0 10px;">></span>
                  <!-- <a (click)="showAllFiles()" *ngIf="idx == 0">{{item.name}}</a> -->
                  <span *ngIf='idx != 0 && (!item.id || idx == status.breadcrumbList.length-1)'>{{item.name}}</span>
                  <a (click)="gothere(item)" *ngIf='item.id && idx != status.breadcrumbList.length-1'>{{item.name}}</a>
                </nz-breadcrumb-item>
              </nz-breadcrumb>
            </span>

          </div>
          <div class="table-body">
            <div class="common-table-cont zzj-scrollbar">
              <nz-spin [nzTip]='status.fileloadingStatus.loadingTip' [nzSpinning]="status.fileloadingStatus.isLoading">

                <nz-table #basicTable [nzData]="status.dataList" [nzShowPagination]="false" [nzScroll]="{ y: '590px' }">
                  <!-- [nzScroll]="{y: '615px' }" -->
                  <thead (nzSortChange)="dataSort($event)" nzSingleSort>
                    <tr>
                      <th nzWidth="100px" nzShowCheckbox [(nzChecked)]="status.allChecked" [nzIndeterminate]="status.indeterminate"
                        (nzCheckedChange)="checkAll($event)"></th>
                      <!-- <th class="hidden-row " style="width: 10%">序号</th>
                      <th class="hidden-row " style="width: 20%">名称</th>
                      <th class="hidden-row " style="width: 20%">上传人</th>
                      <th class="hidden-row " style="width: 10%">大小</th>
                      <th nzShowSort nzSortKey="creationTime" class="hidden-row " style="width: 20%">更新时间</th>
                      <th class="hidden-row " style="width: 20%">操作</th> -->
                      <th class="hidden-row " nzWidth="100px">序号</th>
                      <th class="hidden-row " nzWidth="150px">名称</th>
                      <th class="hidden-row " nzWidth="150px">上传人</th>
                      <th class="hidden-row " nzWidth="100px">大小</th>
                      <th nzShowSort nzSortKey="creationTime" class="hidden-row " nzWidth="150px">更新时间</th>
                      <th class="hidden-row " nzWidth="150px">操作</th>
                    </tr>
                  </thead>
                  <tbody>
                    <tr class="table-col" *ngFor="let data of status.dataList;let idx = index"
                      (click)="chooseData(data)" [class.active]="!data.selected">
                      <td nzShowCheckbox [(nzChecked)]="data.checked" (nzCheckedChange)="refreshCheckboxStatus()"
                        (click)="clearclick(data)"></td>
                      <td class="hidden-row ">{{idx+1}}</td>
                      <td [title]='data.name' class="hidden-row ">
                        <span class="name-wrap">
                          <i nz-icon type="file-text" theme="fill" *ngIf="data.fileId "></i>
                          <i nz-icon type="folder" theme="fill" *ngIf="!data.fileId "
                            style="color: rgb(255, 214, 89);font-size: 22px;"></i>
                          <span (click)="clearclick(data);doubleClick(data);"> {{data.name }}{{data.extension}}</span>
                        </span>
                      </td>
                      <td class="hidden-row ">{{data.creatorUserName }}</td>
                      <td class="hidden-row ">{{data.fileId?(data.size | FileSizePipe):'-'}}</td>
                      <td class="hidden-row ">{{data.creationTime | DateTransformPipe}}</td>
                      <td class="hidden-row " style="padding-left: 22px;">
                        <span class="tools">
                          <!-- <a href="javascript:;" (click)="preview(data)"
                            *ngIf="data.extension == '.jpg'&& data.fileId || data.extension == '.jpge' && data.fileId || data.extension == '.gif' && data.fileId ||data.extension == '.png' && data.fileId || data.extension == '.pdf' && data.fileId || data.extension == '.bmp' && data.fileId || data.extension == '.mp4' && data.fileId " title="预览">
                            <i nz-icon type="eye" theme="outline"></i>
                          </a> -->
                          <a href="javascript:;" (click)="download(data)" title="下载" *ngIf="data.fileId ">
                            <i nz-icon type="download"></i>
                          </a>
                          <nz-divider *ngIf="data.fileId " nzType="vertical"></nz-divider>
                          <a href="javascript:;" (click)="editCatalog(2,data)"
                            *ngIf="(status.PIpageAuthorty.PIEdit ? (status.PIpageAuthorty.PIEdit && status.type == 2 ) : data.creatorUserId  == status.userId )|| (status.pageAuthorty.Organizations_DocumentLibrarysEdit ? (status.pageAuthorty.Organizations_DocumentLibrarysEdit && status.type == '1') : data.creatorUserId  == status.userId)"
                            title="编辑">
                            <i nz-icon type="form"></i>
                          </a>
                          <nz-divider nzType="vertical"></nz-divider>
                          <a href="javascript:;" (click)="deleteCatalog(data)"
                            *ngIf="(status.PIpageAuthorty.PIDelete ? (status.PIpageAuthorty.PIDelete && status.type == 2 ) : data.creatorUserId  == status.userId) || (status.pageAuthorty.Organizations_DocumentLibrarysDelete ? (status.pageAuthorty.Organizations_DocumentLibrarysDelete && status.type == '1') : data.creatorUserId  == status.userId)"
                            title="删除">
                            <i nz-icon type="delete"></i>
                          </a>
                          <!-- <ng-template #content>
                            <a href="javascript:;" (click)="deleteCatalog(data)"  title="删除">
                              <i nz-icon type="delete"></i>
                            </a>
                          </ng-template> -->
                        </span>
                      </td>
                    </tr>

                  </tbody>
                </nz-table>
              </nz-spin>
            </div>
          </div>
        </div>
        <!-- <div class="common-pager">
          <nz-pagination [(nzPageIndex)]="status.PageModel.PageIndex" [(nzPageSize)]="status.PageModel.PageSize" [(nzTotal)]="status.PageModel.Total"
            (nzPageIndexChange)="pageChange($event)" nzShowQuickJumper></nz-pagination>
        </div> -->
        <!-- <div class="pager">
          <nz-pagination [(nzPageIndex)]="status.PageModel.PageIndex" [nzTotal]="status.PageModel.Total"
            (nzPageIndexChange)="pageIndexChange($event)" (nzPageSizeChange)="pageSizeChange($event)" nzShowSizeChanger
            nzShowQuickJumper></nz-pagination>
        </div> -->

        <!-- <div class="pager">
          <nz-pagination [(nzPageIndex)]="status.pager.pageIndex" [nzTotal]="status.pager.totalCount"
            [nzShowTotal]="rangeTemplate" nzShowQuickJumper nzShowSizeChanger [nzPageSize]="status.pager.pageSize"
            (nzPageIndexChange)="pageIndexChange($event)" (nzPageSizeChange)="pageSizeChange($event)"
            [nzItemRender]="renderItemTemplate">
          </nz-pagination>
          <ng-template #renderItemTemplate let-type let-page="page">
            <a *ngIf="type === 'pre'">上页</a>
            <a *ngIf="type === 'next'">下页</a>
            <a *ngIf="type === 'page'">{{ page }}</a>
          </ng-template>
          <ng-template #rangeTemplate let-total>
            共 {{total}} 条
          </ng-template>
        </div> -->
      </div>

    </div>
  </div>



  <!-- 弹出框（预览文件） -->
  <nz-modal [(nzVisible)]="status.preview.isVisible" [nzContent]="previewModalContent" [nzFooter]="previewModalFooter"
    [nzWidth]="status.preview.width" (nzOnCancel)="status.preview.isVisible = !status.preview.isVisible"
    [nzTitle]="status.preview.title">
    <ng-template #previewModalContent>
      <iframe class="preview-iframe" #previewFrame></iframe>
    </ng-template>
    <ng-template #previewModalFooter>
      <button nz-button [nzType]="'primary'" (click)="download()">下载</button>
    </ng-template>
  </nz-modal>


  <!-- 新增/编辑 -->
  <nz-modal [(nzVisible)]="status.editModal.isVisible" [nzContent]="addModalContent" [nzFooter]='addModalFooter'
    [nzWidth]="500" [nzMaskClosable]="false" [nzFooter]="null" (nzOnCancel)="closeModal(status.editModal)"
    [nzTitle]="status.editModal.title" [nzStyle]="{ top: '300px' }">
    <ng-template #addModalContent>
      <div nz-row style='margin-left: 40px'>
        <label nz-col nzSpan="6" style="line-height: 32px">{{status.editModal.label}}</label>
        <input maxlength="30" nz-col nzSpan="18" nz-input style="width: 60%; margin-right:8px;" id="editModal"
          [placeholder]="status.editModal.placeholder" [(ngModel)]="status.editModal.value">
      </div>
      <!-- <div nz-row class="modal-btn" style="text-align: center;margin-top: 30px;">
        <button nz-col nz-button nzType="primary" (click)="status.editModal.isVisible = false">确认</button>
      </div> -->
    </ng-template>
    <ng-template #addModalFooter>
      <button nz-button nzType="primary" (click)="onEditSave(status.editModal.operationType)">
        保存
      </button>
    </ng-template>
  </nz-modal>

  <!-- 文件上传 -->
  <nz-modal [(nzVisible)]="status.uploadFile.isVisible" [nzContent]="uploadFileModalContent"
    [nzFooter]='uploadFileModalFooter' [nzWidth]="500" [nzMaskClosable]="false" [nzFooter]="null"
    (nzOnCancel)="closeUploadFile()" nzTitle="上传文件" [nzStyle]="{ top: '300px' }">
    <ng-template #uploadFileModalContent>
      <components-file-upload #fileUpload [formData]="status.uploadFile.uploadModel" *ngIf="status.uploadFile.isCreate"
        [disabledForm]="status.uploadFile.disabledForm" (onUploadFileSuccess)="uploadFileSuccess($event)">
      </components-file-upload>
    </ng-template>
    <ng-template #uploadFileModalFooter>
      <button nz-button nzType="primary" (click)="fileSub()">
        提交
      </button>
    </ng-template>
  </nz-modal>

  <!-- 弹出框（二维码） -->
  <nz-modal [(nzVisible)]="status.qrCode.isVisible" [nzContent]="qrCodeModalContent" [nzFooter]="null"
    [nzWidth]="status.qrCode.width" (nzOnCancel)="status.qrCode.isVisible = !status.qrCode.isVisible"
    [nzTitle]="status.qrCode.title" [nzStyle]="{ top: '200px' }">
    <ng-template #qrCodeModalContent>
      <div class="qr-code-wrap">
        <a href="javascript:;" class="qr-code-item" *ngFor="let item of status.qrCode.data" [title]="item.name">
          <!-- 生成文件路径二维码 -->
          <qrcode [qrdata]="item.url" [size]="256" level="M"></qrcode>
          <label class="qr-code-text">{{item.name}}</label>
        </a>
      </div>
    </ng-template>
    <!-- <ng-template #qrCodeModalFooter>
      <button nz-button [nzType]="'primary'" (click)="status.qrCode.isVisible = !status.qrCode.isVisible">确定</button>
    </ng-template> -->
  </nz-modal>

  <!-- 文件移动弹出框 -->
  <nz-modal [(nzVisible)]="status.moveFileModal.isVisible" [nzContent]="moveFileModalContent"
    [nzWidth]="status.moveFileModal.width" nzDraggable [nzFooter]="moveFileModalFooter"
    (nzOnCancel)="closeMoveFileModal()" [nzTitle]="status.moveFileModal.title" [nzStyle]="{ top: '300px' }">
    <ng-template #moveFileModalContent>
      <div class="tree-move-wrap">
        <!-- <div href="javascript:;" class="tree-move-hd" >
          <i nz-icon [type]="status.MovetreeNodes ? 'folder-open' : 'folder'" ></i>
        全部文件</div> -->
        <nz-tree #treeComMove nzShowIcon="true" [nzData]="status.MovetreeNodes" (nzClick)="activeNode($event)"
          (onEditSave)="onEditSave($event)" (onDeleteSave)="onDeleteSave($event)" nzAsyncData nzDraggable
          (nzOnDrop)="nzEvent($event)">

          <ng-template #nzTreeTemplate let-node>
            <div class="customMove-node" [id]="node.key"
              [class.active]="this.status.moveFileModal.activedNode?.key===node.key" (click)="openFolder(node)">
              <span *ngIf='node.key'>
                <i nz-icon [type]="node.isExpanded ? 'folder-open' : 'folder'" (click)="openFolder(node)"></i>
                <span class="folder-name">{{node.title}}</span>
              </span>
              <span *ngIf='!node.key'>
                <i nz-icon type="folder"></i>
                <input nz-input id="insertNode" [(ngModel)]="status.insertNodeInfo.value">
                <i class="insertNode-icon" nz-icon type="check" (click)="insertSave(node)"></i>
                <i class="insertNode-icon" nz-icon type="close" (click)="insertsCancel(node)"></i>
              </span>
            </div>
          </ng-template>

        </nz-tree>
      </div>
    </ng-template>
    <ng-template #moveFileModalFooter>
      <button nz-button [nzType]="'primary'" [nzSize]="'default'" (click)="insertNode()" style="float: left">
        新建文件夹
      </button>
      <button nz-button nzType="default" (click)="closeMoveFileModal()">
        取消
      </button>
      <button nz-button nzType="primary" (click)="movefilesave()">
        确定
      </button>
    </ng-template>
  </nz-modal>

</div>